<!DOCTYPE html>
<html>
<head lang="en">
    <!--<meta charset="UTF-8">-->
    <meta content="学学">
    <meta content="名称">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360用极速模式打开-->
    <meta name=renderer">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<link rel="stylesheet" href="css/louti.css"/>-->
    <!--<script  type="text/javascript" src="js/jquery-2.1.4.min.js"></script>-->
    <!--<script type="text/javascript" src="js/louti.js"></script>-->
    <title>天气预报</title>
    <style>
        *{padding:0;margin:0;list-style:none;}
        #bj{
            width:350px;
            height:550px;
            background: #7e55ff;
            margin:100px auto;
            border-radius:5px;
        }
        .box_1{
            width:100%;
            height:14%;
            /*background:yellow;*/
            text-align:center;
            padding-top:6%;
        }
        .box_1 p:nth-child(1){
            font-size:30px;

        }
        .box_2{
            width:90%;
            height:20%;
            /*background:green;*/
            font-size:50px;
            text-align:center;
            padding-left:10%;
        }

        .box_3{
            width:100%;
            height:5%;
            border-bottom:1px solid #9269ff;
        }
        .box_3 span:nth-child(1){
            margin-left:5px;
        }
        .box_3 span:nth-child(2){
            float:right;
        }
        .box_4{
            width:100%;
            height:19%;
            /*background: #d45eff;*/
        }
        .box_4 p{
            margin-left:5px;
        }
        .box_4 div ul li{
            list-style:none;
            float:left;
            margin:20px 15px;
        }
        .box_4 div ul li img{
            width:100%;
        }
        .box_5{
            width:100%;
            height:35%;
            /*background: #ff255b;*/
        }
        .box_5 .xx{
            width:20%;
            height:100%;
            float:left;
        }.box_5 .xx ul{
            border-left:1px solid #956bff;
                 }

        .box_5 .xx ul li{
            margin-bottom:20px;
            text-align:center;

        }
        .box_5 .xx ul li:nth-child(2){
            font-size:14px;
        }


    </style>
</head>
 <body>
    <div id="bj">
        <div class="box_1">
          <p>泉州市</p>
          <p>瞬间多云</p>
        </div>
        <div class="box_2">72°</div>
        <div class="box_3">
            <span>星期四 今天</span>
            <span>79°～ 64°</span>
        </div>
        <div class="box_4">
            <p>多天预报</p>
            <div>
                <ul>
                    <li><img src="img/1.img/a-1.png"   alt=""/></li>
                    <li><img src="img/1.img/a-2.png" alt=""/></li>
                    <li><img src="img/1.img/a-1.png" alt=""/></li>
                    <li><img src="img/1.img/a-2.png" alt=""/></li>
                    <li><img src="img/1.img/a-1.png" alt=""/></li>
                </ul>
            </div>
        </div>
        <div class="box_5">
            <div class="xx">
                <ul>
                    <li>今天</li>
                    <li>瞬间多云</li>
                    <li>29°</li>
                    <li>39°</li>
                </ul>
            </div>
            <div class="xx">
                <ul>
                    <li>明天</li>
                    <li>瞬间多云</li>
                    <li>29°</li>
                    <li>39°</li>
                </ul>
            </div>
            <div class="xx">
                <ul>
                    <li>星期三</li>
                    <li>晴转多云</li>
                    <li>29°</li>
                    <li>39°</li>
                </ul>
            </div>
            <div class="xx">
                <ul>
                    <li>星期四</li>
                    <li>晴转多云</li>
                    <li>29°</li>
                    <li>39°</li>
                </ul>
            </div>
            <div class="xx">
                <ul>
                    <li>星期五</li>
                    <li>瞬间多云</li>
                    <li>29°</li>
                    <li>39°</li>
                </ul>
            </div>
        </div>
    </div>

 </body>
</html>